<template>
	<view class="pageTemplatePad">
		<!-- 名片卡信息 -->
		<view class="businessCardBox" v-if="id && userInfo.id">
			<view class="topInfo">
				<view class="topLeftInfo">
					<view class="name">
						<text class="useraName">{{ userInfo.name }}</text>
						<text class="task">{{ userInfo.job }}</text>
					</view>
					<view class="companyName" v-if="userInfo.companyName">
						<view class="companyNameText1" v-if="userInfo.companyList[0]">{{ userInfo.companyList[0] }}
						</view>
						<view class="companyNameText2" v-if="userInfo.companyList[1]">{{ userInfo.companyList[1] }}
						</view>
						<view class="companyNameText2" v-if="userInfo.companyList[2]">{{ userInfo.companyList[2] }}
						</view>
						<view class="companyNameText2" v-if="userInfo.companyList[3]">{{ userInfo.companyList[3] }}
						</view>
					</view>
				</view>
				<!-- <image :src="config.baseurl + userInfo.avatar" class="userAvatar" mode="scaleToFill"></image> -->
			</view>
			<view class="mainInfo">
				<view class="infoRow">
					<text class=" iconfont icon-phone-fill size16 mr8"></text>
					<text class="infoText">{{userInfo.mobile}}</text>
				</view>
				<view class="infoRow">
					<text class=" iconfont icon-message size16 mr8"></text>
					<text class="infoText">{{userInfo.email}}</text>
				</view>
				<view class="infoRow">
					<view class="centerRow">
						<text class=" iconfont icon-location size16 mr8"></text>
						<text class="infoText addr">{{ userInfo.addr || companyInfo.addr }}</text>
						<view class="navigation" @click="openLoadtion">导航</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 联系功能 -->
		<view class="actionBox" v-if="id && userInfo.id">
			<view class="actionItem" open-type="share">
				<text class=" iconfont icon-chaosongren size25" :style="{ color: color }"></text>
				<text class="actionText">分享TA</text>
				<button class="actionItem absolute" open-type="share"></button>
			</view>
			<view class="actionItem" @click="callPhone">
				<text class=" iconfont icon-phone size25" :style="{ color: color }"></text>
				<text class="actionText">打电话</text>
				<!-- <view class="actionItem absolute"></view> -->
			</view>
			<view class="actionItem" @click="addWxUser">
				<text class=" iconfont icon-weixin size25" :style="{ color: color }"></text>
				<text class="actionText">加微信</text>
			</view>
			<view class="actionItem" @click="storePhone">
				<text class=" iconfont icon-tongxunlu size25" :style="{ color: color }"></text>
				<text class="actionText">加通讯</text>
			</view>
		</view>
		<!-- 简介信息 -->
		<view class="details">
			<image :src="config.baseurl + item" class="infoImg" mode="widthFix" v-for="item of companyInfo.imgs" :key="item"
			 @click="lookDetails(config.baseurl + item)">
			</image>
		</view <!-- 轮播信息 -->
		<view class="swipperBox" v-if="companyInfo.swippers && companyInfo.swippers.length > 0">
			<view class="swipperTitle">品质实力保障</view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="item of companyInfo.swippers" :key="item">
					<image class="swipperImg" :src="config.baseurl + item" mode="" @click="lookDetails(config.baseurl + item)">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 视频信息 -->
		<view class="videoBox" v-if="companyInfo.video">
			<image class="videoTitle" src="../../static/videoTitle.png" mode=""></image>
			<video class="myVideo" id="myVideo" :src="config.baseurl + companyInfo.video" @error="videoErrorCallback"
			 show-center-play-btn enable-progress-gesture enable-play-gesture show-play-btn controls></video>
		</view>
		<!-- 弹窗显示微信信息 -->
		<view class="wxMask" v-show="visible" @click="close">
			<view class="content">
				<image :src="config.baseurl + userInfo.avatar" class="userAvatar" mode="scaleToFill"></image>
				<view class="name">{{ userInfo.name }}</view>
				<view class="companyName">{{ companyInfo.name }}</view>

				<text class="infoText">我的微信号：{{userInfo.mobile}}</text>
				<button class="copyBtn" @click.stop="copyText">复制微信号</button>
			</view>
		</view>
		<!-- 弹窗显示图片详情 -->
		<view class="wxMask" v-show="isShowDetails" @click.stop="closeDetails">
			<movable-area class="movableBox" scale-area>
				<movable-view class="movableBox" direction="all" scale scale-min="0.5" scale-max="4" :x="offsetX" :y="offsetY"
				 @touchend="onTouchEnd" @touchmove="onTouchMove" out-of-bounds>
					<view class="imgDetailBox">
						<image :src="detailsImgUrl" class="detailsImg" mode="widthFix"></image>
					</view>
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script>
	import {
		getCompanyInfo,
		getUserInfo
	} from "@/api";
	import config from "@/config";

	export default {
		data() {
			return {
				config,
				companyInfo: {
					imgs: [],
					video: undefined
				},
				userInfo: {},
				id: undefined,
				color: "#c7000a",
				visible: false,
				videoContext: undefined,
				autoplay: true,
				indicatorDots: true,
				interval: 2000,
				detailsImgUrl: undefined,
				isShowDetails: false,
				isScaling: false,
				lastTouchTime: 0,
				// videoUrl: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
			};
		},
		methods: {
			// 双指缩放中标记状态
			onTouchMove(e) {
				if (e.touches.length >= 2) this.isScaling = true;
			},
			// 缩放结束
			onTouchEnd(e) {
				const timer = setTimeout(() => {
					this.isScaling = false; // 重置状态
					clearTimeout(timer)
				}, 300);
			},
			// 查看图片详情
			lookDetails(url) {
				console.log("进入预览", url);
				this.detailsImgUrl = url;
				this.isShowDetails = true;
			},
			closeDetails() {
				if (!this.isScaling) {
					this.detailsImgUrl = undefined;
					this.isShowDetails = false;
				}
			},
			// 视频播放错误报错
			videoErrorCallback: function(e) {
				console.log(e.target.errMsg);
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			dogetCompanyInfo() {
				getCompanyInfo().then(res => {
					console.log(res);
					this.companyInfo = res.data;
				})
			},
			// 获取个人信息
			dogetUserInfo() {
				getUserInfo(this.id).then(res => {
					if (res.data.companyName) res.data.companyList = res.data.companyName.split(",");
					this.userInfo = res.data;
					console.log("======", this.userInfo);
				})
			},
			// 打开位置
			openLoadtion() {
				const latitude = Number(this.companyInfo.lat)
				const longitude = Number(this.companyInfo.lng)
				console.log(latitude, longitude);
				uni.openLocation({
					name: this.companyInfo.name,
					address: this.companyInfo.addr,
					latitude,
					longitude,
					scale: 18
				})
			},
			// 保存到通讯录
			storePhone() {
				uni.addPhoneContact({
					firstName: this.userInfo.name,
					mobilePhoneNumber: this.userInfo.mobile,
					success: () => {
						console.log('success');
						wx.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 2000
						})
					},
					fail: function(err) {
						console.log('fail', err);
					}
				});
			},
			// 打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.mobile //仅为示例
				});
			},
			// 添加微信
			addWxUser() {
				this.visible = true;
			},
			// 关闭复制弹窗
			close() {
				this.visible = false;
			},
			// 复制微信号
			copyText() {
				uni.setClipboardData({
					data: this.userInfo.mobile,
					success: () => {
						console.log('success');
						wx.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						})
						const timer = setTimeout(() => {
							this.close();
							clearTimeout(timer);
						}, 1500)
					},
					fail: (err) => {
						console.log(err);
					}
				});
			}
		},
		onLoad(options) {
			console.log("options", options);
			// 初始化赋值视频组件
			this.videoContext = uni.createVideoContext('myVideo')
			this.dogetCompanyInfo();
			if (options.id) {
				this.id = options.id;
				this.dogetUserInfo();
			}
		},
		onShareAppMessage() {
			// const promise = new Promise(resolve => {
			//   setTimeout(() => {
			//     resolve({
			//       title: '自定义转发标题'
			//     })
			//   }, 2000)
			// })
			return {
				title: '您好，这是我的名片，望惠存',
				path: `/pages/businessCard/businessCard?id=${this.userInfo.id}&unitId=${this.companyInfo.unitId}`,
				// promise
			}
		}
	}
</script>

<style lang="less">
	.ck-icon {
		color: #fff;
	}

	.size16 {
		font-size: 32rpx;
	}

	.size25 {
		font-size: 50rpx;
	}

	.swipperBox {
		width: 100%;
		// height: 300upx;
		margin-top: 10upx;
		padding-bottom: 30upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: ce;

		.swipperTitle {
			width: 100%;
			text-align: center;
			background: url("https://dkzs.site/cardApi/upload/assets/titleBorder.png") no-repeat;
			background-size: 293upx;
			background-position: bottom center;
			line-height: 80upx;
			font-weight: bold;
			font-size: 36upx;
		}

		.swiper {
			margin-top: 35upx;
			width: 700upx;
			height: 428upx;

			.swipperImg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.wxMask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.movableBox {
			width: 100%;
			height: 80%;
		}

		.imgDetailBox {
			width: 100%;
			height: 100%%;
			overflow: auto;
			// displa;
			text-align: center;

			.detailsImg {
				// min-width: 700upx;
				width: 100%;
			}
		}

		.content {
			width: 80%;
			height: 800upx;
			background-color: #fff;
			border-radius: 16upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;
			box-sizing: border-box;

			.name,
			.companyName {
				margin-top: 50upx;
				font-size: 32upx;
			}

			.companyName {
				font-size: 28upx;
				color: #aaa;
			}

			.infoText {
				margin-top: 180upx;
				font-size: 28upx;
				color: #aaa;
			}

			.copyBtn {
				width: 300upx;
				border-radius: 20upx;
				margin-top: 40upx;
				background-color: transparent;
				border: 1px solid #c7000a;
				color: #c7000a;
				font-size: 30upx;
			}
		}
	}

	.mr8 {
		margin-right: 16upx;
	}

	.pageTemplatePad {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: initial;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		// padding: 10px;
		// box-sizing: border-box;
		// font-family: "楷体";
		.videoBox {
			width: 100%;
			font-display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.videoTitle {
				width: 100%;
				height: 140upx;
			}

			.myVideo {
				width: 642upx;
				height: 390upx;
				margin: 40upx auto 135upx;
				display: block;
			}
		}

		.userAvatar {
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
		}

		.topInfo {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.topLeftInfo {
				// height: 140upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// padding-left: 10upx;
				box-sizing: border-box;
			}

			.name {
				font-size: 44rpx;
				font-weight: bolder;

				.useraName {}

				.task {
					font-size: 22rpx;
					font-weight: 600;
					margin-left: 27upx;
				}
			}

			.companyName {
				font-size: 30rpx;
				line-height: 35upx;
				font-weight: bold;
				margin-top: 20upx;
				letter-spacing: 5rpx;
				height: 130upx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.companyNameText2 {
					// font-weight: 500;
				}
			}

			// .icon {
			// 	font-size: ;
			// }
		}

		.mainInfo {
			width: 100%;
			margin-top: 20rpx;
			font-size: 26upx;

			.infoRow {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 40upx;
				position: relative;
				margin-bottom: 5upx;

				.centerRow {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;

				}

				.infoText {
					// margin-top: -10upx;
					font-size: 26rpx;
					font-weight: 700;
				}

				.addr {
					font-size: 20upx;
					font-weight: 650;
				}

				.navigation {
					// position: absolute;
					// right: 0;
					font-size: 18upx;
					background-color: #fcb040;
					border-radius: 40upx;
					padding: 2upx 20upx;
					margin-left: 40upx;
				}
			}
		}

		.businessCardBox {
			width: 100%;
			height: 424upx;
			// border-radius: 12upx;
			// background-color: #c7000a;
			background: url("https://dkzs.site/cardApi/upload/assets/topBg.png") no-repeat;
			background-size: 100% 100%;
			padding-left: 97upx;
			padding-top: 60upx;
			box-sizing: border-box;
			color: #fff;
		}

		.actionBox {
			width: 640rpx;
			height: 115upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			// padding: 0 116upx 0 125upx;
			// box-sizing: border-box;

			.actionItem {
				width: 140upx;
				height: 110upx;
				padding: 15upx 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				// font-size: 28upx;
				position: relative;

				.actionText {
					font-size: 16upx;
					font-weight: bold;
				}
			}

			.absolute {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: transparent;
				border: none;
				top: 0;
				left: 0;
			}
		}

		.details {
			width: 100%;
			border-radius: 20upx;
			overflow: hidden;
		}
	}

	.infoImg {
		width: 100%;
	}
</style>
